<template>
	<view>
		<image class="bg" mode="widthFix" src="@/static/imgs/head45.png"></image>
		<view class="cantainer">
			<view class="status_bar"><!-- 这里是状态栏 --></view>
			<view class="flexR between">
				<uni-search-bar v-model="deviceName" style="width: 85%; padding: 10px 0;" radius="20" @confirm="search"
				@cancel="clear" cancelText="重置" cancelButton="always" placeholder="请输入关键字"></uni-search-bar>
				<view class="example-body" v-show="current==1">
					<uni-datetime-picker type="date" v-model="single" @change="change($event)">
						<span class="f18">{{month}}</span>
						<span style="display: inline-block; margin-top: 2px; font-size: 14px;">月<uni-icons type="down" size="16"></uni-icons></span>
					</uni-datetime-picker>
				</view>
			</view>

			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
				activeColor="#11A8A3"></uni-segmented-control>
			<view class="content">
				<view v-show="current === 0">
					<view v-for="i in list" :key="i.id">
						<listPre :info="i" />
					</view>
				</view>
				<view v-show="current === 1">
					<view v-for="i in list" :key="i.id" @click="detail(i)">
						<listWatch :info="i"/>
					</view>
				</view>
				<view v-if="!list.length" class="kong">暂无数据</view>
				<view v-if="last && list.length" class="last">已经到底了</view>
			</view>			
		</view>
		<view></view>
	</view>
</template>

<script>
import listPre from '@/components/listPre.vue';
import listWatch from '@/components/listWatch.vue';
export default {
	components: {listPre, listWatch},
	data() {
		return {
			last: false,
			deviceName: '',
			page: 1,
			single: '',
			month: '1',
			list: [],
			items: ['视频', '设备监测数据'],
      current: 0
		};
	},
	onShow() {
		this.list = [];
		this.last = false;
		this.page = 1;
		this.init();
		this.getList();
	},
	onReachBottom() {
		setTimeout(()=>this.loadmore(), 1000)
	},
	methods: {
		loadmore() {
			if(this.last) return;
			this.page +=1;
			this.getList();
		},
		init() {
			this.month = new Date().getMonth() + 1;
		},
		change(v) {
			this.page = 1;
			this.list = [];
			this.month = new Date(v).getMonth() + 1;
			this.getList();
		},
		clear() {
			this.page = 1;
			this.list = [];
			this.deviceName = '';
			this.single = '';
			this.getList();
			this.init();
		},
		search() {
			this.page = 1;
			this.list = [];
			this.getList();
		},
		detail(i) {
			// uni.navigateTo({
			// 	url: `/pages/warn?id=${i.deviceSensibility.id}`
			// });
		},
		getList() {
			let url = `/senor/device/appQueryDeviceOrderByFlvTime?pageNum=${this.page}&pageSize=10&name=${this.deviceName}`;
			if(this.current==1) url = `/senor/data/applist?pageNum=${this.page}&pageSize=10&deviceNo=${this.deviceName}`;
			if(this.current==1 && this.single) {
				url += `&createTime=${this.single}`
			}
			this.$axios({
				method: 'get',
				url,
			}).then(res=>{
				this.list = this.list.concat(res.rows);
				this.list.map(i=>{
					i.humidity = i.humidity && parseFloat(i.humidity*1/10).toFixed(2) || '--'
					i.temperature = i.temperature && parseFloat(i.temperature*1/10).toFixed(2) || '--'
				})
				if(this.list.length>=res.total) {
					this.last = true;
				}
			})
		},
		onClickItem(e) {
      if (this.current != e.currentIndex) {
        this.current = e.currentIndex;
				this.page = 1;
				this.list = []
				this.getList();
      }
    }

	}
}
</script>

<style lang="scss" scoped>
.mr20 {
	margin-right: 20px;
}
.bg {
	width: 100%;
	position: absolute;
	top: 0;
	z-index: 0;
}
</style>